﻿@model Guid
@section Styles{

}
@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@Model' id="hidden_id" />
    <script type="text/javascript">
        var power = JSON.parse(document.getElementById('hidden_power').value);
        var id = document.getElementById('hidden_id').value;
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    power: power,
                    prefix: "/Admin/SysUser",
                    vm: {
                        id: "",
                        form: {},
                        roleIds: [],
                        allRoleList: [],
                    },
                    loading: false,
                }
            },
            computed: {
                formKey: function () {
                    return id ? id : '';
                }
            },
            created: function () {
                this.findForm();
            },
            mounted: function () {
                
            },
            methods: {
                closeWindow: function () {
                    tools.getLayer().close(tools.getLayer().getFrameIndex(window.name));
                },
                findForm() {
                    http.get(`${this.prefix}/findForm/${this.formKey}`, {}).then((res) => {
                        if (res.code != 1) return;
                        this.vm = res.data;
                    });
                },
                saveForm() {
                    //验证
                    if (!this.vm.form.name) return tools.message('用户名不能为空!', '警告');

                    this.loading = true;
                    http.post(`${this.prefix}/saveForm`, this.vm).then((res) => {
                        this.loading = false;
                        if (res.code != 1) return;
                        tools.message("操作成功!", "成功");
                        this.closeWindow();
                    });
                }
            }
        });
    </script>
}

<div id="app" v-cloak class="pl-20 pr-20 pb-100">
    <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>真实姓名:</h4>
            <el-input v-model="vm.form.name" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>账户名称:</h4>
            <el-input v-model="vm.form.loginName" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>账户密码:</h4>
            <el-input v-model="vm.form.password" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>联系电话:</h4>
            <el-input v-model="vm.form.phone" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>邮箱地址:</h4>
            <el-input v-model="vm.form.email" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <h4>角色:</h4>
            <el-checkbox-group v-model="vm.roleIds" class="w100">
                <el-row>
                    <el-col :span="6" v-for="(item, index) in vm.allRoleList" :key="index">
                        <el-checkbox :label="item.id">
                            {{ item.name }}
                        </el-checkbox>
                    </el-col>
                </el-row>
            </el-checkbox-group>
        </el-col>
    </el-row>
    <div class="hzy-admin-window-footer">
        <div style="flex: 1 1 0%"></div>
        <div class="p-10">
            <el-button type="primary" @@click="saveForm" :loading="loading">提交</el-button>
            <el-button type="danger" @@click="closeWindow">关闭</el-button>
        </div>
    </div>
</div>